Web Forms API হল একটি JavaScript API যা ওয়েব ফর্মের সাথে ইন্টারঅ্যাকশন করতে ব্যবহৃত হয়। এটি ফর্মের উপাদানগুলোর (যেমন input fields, buttons, select boxes ইত্যাদি) মান (value) পরিবর্তন, পরীক্ষা, জমা দেওয়া (submit) এবং অন্যান্য কার্যক্রম পরিচালনা করতে সাহায্য করে। ওয়েব ফর্মের এই API ব্যবহারের মাধ্যমে আপনি ফর্মের ডেটা সংগ্রহ করতে, সেগুলি ভ্যালিডেট করতে, এবং ইউজারের ইন্টারঅ্যাকশন ট্র্যাক করতে পারবেন।
Web Forms API এর মাধ্যমে HTML ফর্মের বিভিন্ন উপাদান (যেমন input, select, textarea, button) নির্বাচন করা সম্ভব। JavaScript দিয়ে আপনি এই উপাদানগুলোর মান পরিবর্তন, রিড এবং সেগুলোর ওপর ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে পারেন।
let username = document.getElementById("username").value;
let email = document.querySelector("input[type='email']").value;
এখানে, getElementById() এবং querySelector() মেথডের মাধ্যমে ফর্মের ভ্যালু নেওয়া হয়েছে।
ফর্মের ডেটা একসাথে সার্ভারে পাঠানোর জন্য submit() মেথড ব্যবহার করা হয়। এটি ব্রাউজারের ডিফল্ট ফর্ম সাবমিট প্রক্রিয়া চালাতে পারে, অথবা আপনি কাস্টম সাবমিশনও সেট করতে পারেন।
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // ডিফল্ট সাবমিট বন্ধ করবে
console.log("Form submitted!");
// এখানে ডেটা প্রোসেসিং কোড লিখবেন
});
এখানে, event.preventDefault() ব্যবহার করে ফর্মের ডিফল্ট সাবমিট রোধ করা হয়েছে এবং কাস্টম সাবমিট প্রক্রিয়া তৈরি করা হয়েছে।
ফর্মের ইনপুট ভ্যালিডেশন করতে setCustomValidity() মেথড ব্যবহার করা যায়। এটি কাস্টম বার্তা দেখানোর মাধ্যমে ব্যবহারকারীর ভুল ইনপুট শনাক্ত করতে সাহায্য করে।
let emailInput = document.getElementById("email");
emailInput.addEventListener("input", function() {
if (!emailInput.value.includes('@')) {
emailInput.setCustomValidity("Please enter a valid email address.");
} else {
emailInput.setCustomValidity("");
}
});
এখানে, ব্যবহারকারীর ইনপুট যাচাই করা হচ্ছে এবং যদি ইনপুট সঠিক না হয়, একটি কাস্টম ভ্যালিডেশন বার্তা প্রদর্শিত হবে।
FormData API ব্যবহার করে ফর্মের সমস্ত ডেটা সংগ্রহ করা সম্ভব। এটি ব্যবহার করে আপনি ফর্মের উপাদানগুলোর মান সহজেই একত্রিত করতে পারেন এবং সার্ভারে পাঠাতে পারেন।
let form = document.getElementById("myForm");
let formData = new FormData(form);
formData.forEach(function(value, key) {
console.log(key + ": " + value);
});
এখানে, FormData ব্যবহার করে ফর্মের সব ভ্যালু সংগ্রহ করা হয়েছে এবং forEach() মেথডের মাধ্যমে সেই ডেটা কনসোলে প্রদর্শিত হচ্ছে।
Web Forms API ব্যবহার করে আপনি ফর্মের বিভিন্ন ইভেন্ট (যেমন submit, reset, input, change ইত্যাদি) ট্র্যাক করতে এবং কাস্টম ফাংশন সেট করতে পারেন।
document.getElementById("myForm").addEventListener("input", function(event) {
console.log(event.target.value); // ইনপুট ফিল্ডের পরিবর্তন দেখতে পারবেন
});
এখানে, input ইভেন্টের মাধ্যমে ব্যবহারকারীর ইনপুট প্রতিটি পরিবর্তন ট্র্যাক করা হচ্ছে।
FormData API এবং fetch() ব্যবহার করে আপনি অ্যাসিঙ্ক্রোনাসভাবে ফর্মের ডেটা সার্ভারে পাঠাতে পারবেন।Web Forms API একটি শক্তিশালী টুল যা ওয়েব ফর্মের উপাদানগুলোর সাথে ইন্টারঅ্যাকশন করতে সাহায্য করে। এটি ফর্ম ভ্যালিডেশন, ডেটা সংগ্রহ, ফর্ম সাবমিশন এবং ইভেন্ট হ্যান্ডলিংয়ের মতো কাজ সহজ করে তোলে। JavaScript ব্যবহার করে, আপনি কাস্টম ভ্যালিডেশন, ডাইনামিক ফর্ম ম্যানিপুলেশন এবং অ্যাসিঙ্ক্রোনাস ডেটা সাবমিশন করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও কার্যকর এবং ইন্টারঅ্যাকটিভ করে তোলে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
